<template>
  <base-modal
    class="form-select-setting-modal"
    :title="$t('common.form.tip.jsCodeBlock.debug')"
    :show.sync="show"
    width="400px"
  >
    <div class="test-run">
      <p class="test-run-title">{{ $t('formSetting.jsCodeBlock.testRunText') }}</p>
      <div class="test-run-form">
        <form-builder
          v-if="show"
          ref="FormComponent"
          :fields="filterForDebuggerFields"
          :value="form"
          @update="update"
        >
        </form-builder>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">{{ $t('common.base.reset') }}</el-button>
      <el-button type="primary" @click="onSubmit">
        {{ $t('common.form.tip.jsCodeBlock.testText') }}
      </el-button>
    </div>
  </base-modal>
</template>

<script>
import { computed, defineComponent, ref,toRefs,unref } from "vue";
import { initialize } from '@src/component/form/util';
import { isObjectString } from '../../model/index';
import { CustomerFieldNameMappingEnum } from "@model/enum/FieldMappingEnum";

const NOT_SUPPORT_DEBUGGER_FIELDS_FORM_TYPES = [
  CustomerFieldNameMappingEnum.Customer
]
export default defineComponent({
  name: 'test-run-modal',
  props: {
    analysisResults: {
      type: String,
      default: () => ''
    },
    fields: {
      type: Array,
      default: () => ([])
    },
  },
  setup(props, { emit,expose }) {
    const show = ref(false);
    const { fields, analysisResults } = toRefs(props);
    const codeRunResult = ref('');
    // @ts-ignore
    const form = ref(initialize(unref(fields), {}));
    // 初始化数据
    if(analysisResults.value) {
      codeRunResult.value = analysisResults.value;
    }

    const filterForDebuggerFields = computed(()=> fields.value.filter(field=> !NOT_SUPPORT_DEBUGGER_FIELDS_FORM_TYPES.includes(field.formType)))

    const onClose = () => {
      show.value = false;
    };
    const update = ({ field, newValue }) => {
      const { fieldName, displayName } = field;
      form.value[fieldName] = newValue;
    };
    const testRunModalOpen = (isShow = false) => {
      show.value = isShow;
      form.value = initialize(unref(fields), {});
    };
    const reset = () => {
      form.value = initialize(fields.value, {});
    };
    const onSubmit = () => {
      emit('testCompilerResult',form.value);
      show.value = false;
    };
    expose({testRunModalOpen});
    return {
      filterForDebuggerFields,
      onClose,
      show,
      testRunModalOpen,
      reset,
      onSubmit,
      update,
      form,
      codeRunResult,
      isObjectString,
    };
  },
});
</script>

<style lang="scss">
.test-run {
  margin-top: 24px;
  &-title {
    margin: 0;
    padding-left: 18px;
  }
  &-form {
    // width: 370px;
    text-align: center;
    .form-builder{
      width: 100% !important;
      box-sizing: border-box;
      padding: 0 10px !important;
      overflow-y: auto;
      background-color: transparent !important;
      margin-top: 12px;
      // .form-wrap{
        padding: 0;
        height: 300px;
        .form-item{
          display: flex;
          align-items: flex-start;
            label {
              width: 70px;
              @include text-ellipsis();
              line-height: 35px;
              margin-right: 12px;
            }
        }
      // }
      .form-item-error{
        text-align: left;
      }
    }
    .app-nodata-view{
      height: 400px;
    }
    .send-request{
      display: inherit;
      padding-top: 12px;
      border-top: 1px solid  #E8E8E8;
      &-button {
        margin-left:8px;
      }
      &-msg {
        font-size: 12px;
        line-height: 32px;
        margin-left: 8px;
        color: $text-color-secondary;
      }
    }
  }
}
</style>
<style lang="scss">
//.form-select-setting-modal{
//  .base-modal{
//    background: #151515;
//    color: #fff;
//    .test-run{
//      background: #151515;
//      color: #fff;
//      input{}
//    }
//  }
//}
</style>
